<?php
use yii\helpers\Url;
// $data_matrix = "https://proxcrm.xgate.com/barcode/frontend/web/index.php?r=qr/barcode&code=" . $userInfo['card_number'] . "&type=barcode";
$barcode = Url::to('@web/Jselect/codemaker/barcode.php?text=' . $userInfo['membership']['card_number']);
// echo $barcode;exit;
$this->title = '领取优惠券';
$redeemUrl = Url::to(['member-binding/redeem']);
?>

<style>
.tab_content{
    display: none;
    padding:20px 0
}
.tab_content.active{
    display: block
}
.couponBox{
   /* padding: 5px 0; */
}
.couponCard{
   
    height:10rem;
    margin-bottom: 5px;
    box-shadow: 2px 2px 10px 1px #d3dce1;
    
    position:relative;               
}
/* .js-show .js-category {
    background: linear-gradient(to right,rgb(120,217,255) ,rgb(25,180,237))!important;
} */
.canUseBack{
    background: rgb(25,180,237);
}
.usedBack,.expiredBack{
    background:grey;
}
.couponInfo{
    width: 26%;
    height:100%;
    flex-direction: column;
    justify-content: center;
    border-bottom: none;
    margin: 0;
    color:#fff;
    font-size:1.2rem;
    padding:0.3rem 0;
    /* background-image:-webkit-gradient(linear,100% 50%,0 0,from(transparent),color-stop(.5,transparent),color-stop(.5,#fff),to(#fff)),
                    -webkit-gradient(linear,100% 50%,0 100%,from(transparent), color-stop(.5,transparent),color-stop(.5,#fff),to(#fff));
    background-size:.5rem 1rem;
    background-repeat:repeat-y;
    background-position:100% 0;  */
}
.rightBorder{
    width:10px;
    height:100%;
    background: url('../../jselect/img/border.png') repeat;
    background-size:100% ;
}
.grey{
    color:grey!important;
}
.couponLogo>div{
    width: auto;
    height: 7rem;
    margin: 0 auto -1rem;
    color:#fff
}
.couponListContainer{
    width: 37.5rem
}
.redeemBtn{ 
    font-size: 1.2rem!important;
    padding: 0 1.7rem!important;
    color: rgb(24, 180, 237);
    margin-top: .4rem;
}
.middleDiv{
    width:1.6rem;
    height:100%;
    position:relative;
}
.middleDiv .ltop{
    height:1.6rem;
    background:#fff;
    border-radius:50%;
    position:relative;
    top:-8px;
}
.middleDiv .lbottom{
    height: 1.6rem;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    bottom: -0.8rem;
    width: 1.6rem;
}
.middleDiv .lmiddle{
    margin-top: .2rem;
    background: #fff;
    width: .2rem;
    height: 6.6rem;
    margin-left: .8rem;  
}
.weui-custom-ft button {
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    color: #04be02;
    text-decoration: none;
    position: relative;
    font-size: 18px;
    line-height: 48px;
    border: none;
    border-right: 1px solid #f8f8f8;
    background-color: #fff;
    outline: none
}
img.barcode{
    max-width: 100%;
    width: initial;
    height: initial;
    max-height: 80px;
}
.tncListtitle{
    padding-left: 20px!important;
}
.tncList{
    padding: 0 20px 20px;
    list-style: none;
}
.closeBtn{
    border-radius: 50%;
    border: 1px solid #000;
    padding: 2px;
    position: relative;
    top: 5px;
}
.dateBox {
    font-size: 12px;
    padding: 0 20px;
    position: relative;
}
.dateBox div{
    color: #fff;
    padding: 5px 0;
    border-top: 1px solid #fff;
}
.dateBox .icon{
    position: absolute;
    bottom: 4px;
    right: 17px;
    line-height: 1;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 50%;
    color: rgb(25,180,237);
}
.js-show .dateBox .icon{
    transform:rotate(180deg);
    -ms-transform:rotate(180deg); 	/* IE 9 */
    -moz-transform:rotate(180deg); 	/* Firefox */
    -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
    -o-transform:rotate(180deg); 	/* Opera */
}
.weui_mask{
    z-index:999
}
.page-bd li.js-show .page-category{
    display: block;
    height:initial
}
.page-bd .page-category{
    display: none;
    height:initial
}
.text-white{
    color: #fff
}
</style>

<div class="couponListContainer center">
<!--     <div class="weui-header bg-blue">  -->
<!--         <div class="weui-header-left"> <a class="icon icon-109 f-white">返回</a>  </div> -->
<!--         <h1 class="weui-header-title">我的优惠券</h1> -->
<!--         <div class="weui-header-right"> -->
            <!-- <a class="icon icon-83 f-white">更多</a> -->
<!--         </div>  -->
<!--     </div> -->
    <div class="weui_tab" style="height:44px;" id="topTab"><!--tab-fixed添加顶部-->
        <div class="weui_navbar" style="height:44px;">
            <div class="weui_navbar_item tab-blue">
                可使用
            </div>
            <div class="weui_navbar_item">
                已使用
            </div>
            <div class="weui_navbar_item">
                已过期
            </div>
        </div>
    </div>
    <div class="page-bd tab_content active " id="validCoupon">  
         <ul class="coupnsList">
            <li class="weui_cells couponBox">
                <div class="weui_cell couponCard js-category">
                    
                    <div class="weui_cell_bd weui_cell_primary couponLogo">
                        <img src=""
                        class="img-max"> 
                    </div>
                    <div class="middleDiv">
                        <div class="ltop"></div>
                        <div class="lmiddle"></div>
                        <div class="lbottom"></div>
                    </div>
                    <div class="weui_cell tcenter couponInfo">
                       
                        <div>滿2000元使用</div>
                        <button class="weui_btn weui_btn_mini weui_btn_default redeemBtn" onclick="showmark()"></button>
                   21262ed </div>
                    <div class="rightBorder"></div>
                </div>
                <div class="page-category js-categoryInner couponTnc">
                    <div class="weui_cells" style="margin-top: 0px;">
                        <div class="weui_cell">
                            <div class="weui_cell_bd weui_cell_primary">
                                <p>新西南</p>
                            </div>
                        </div>   
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="page-bd weui_cells tab_content" id="usedCoupon">         
        
    </div>
    <div class="page-bd weui_cells tab_content" id="expiredCoupon">         
        
    </div>
</div>

<div class="weui_mask"></div>
<div class="weui-custom-pop redeempop">
    <div class="close js-propHide" >
        <i class="icon icon-95 f25"></i>
    </div>
    <div class="weui-custom-hd f16">
        請輸入核銷密碼
    </div>
    <div class="weui-custom-bd">
        <input type="tel" class="weui_input" id="redeem_code" placeholder="密碼" style="border-color:black">
        <div class="confirm_res_msg"></div>
    </div>
    <div class="weui-custom-ft">
        <button class="js-propHide f-black">取消</button>
        <button class="js-redeemConfirm f-black">确定</button>
    </div>
</div>
<div class="weui-custom-pop tncpop">
    <div class="close js-propHide" >
        <i class="icon icon-95 f15 closeBtn"></i>
    </div>
    <div class="weui-custom-hd f14 tleft tncListtitle">
        条款及细则:
    </div>
    <div class="weui-custom-bd">
        <ul class="tleft tncList page-bd-15">
            <li>1.活动期间，J SELECT会员到店立享购物九折(部分品牌)。</li>
            <li>2.每位会员仅可获赠会员尊享好礼一次。</li>
            <li>3.会员尊享好礼数量有限，先到先得，送完即止。</li>
            <li>4.会员尊享好礼不可转让、退换或者兑换现金。</li>
            <li>5.本优惠仅适用于J SELECT中国大陆代理消费品业务。</li>
            <li>6.捷成消費品零售(上海)有限公司保留随时修改本条款及细则、更改或终止优惠之权利，而不会作另行通知。</li>
            <li>7.如有任何争议，捷成消費品零售(上海)有限公司保留最终决定权。</li>
            <li>* 现金券使用规则：仅供J SELECT会员专享，可在J SELECT及J SELECT +门店单笔消费满2000元立减100元（不叠加），配件除外，当次核销可用。</li>
        </ul>
    </div>
    <!-- <div class="weui-custom-ft">
        <button class="js-propHide f-black">取消</button>
        <button class="js-redeemConfirm f-black">确定</button>
    </div> -->
</div>
<script>
var data = JSON.parse(<?= json_encode($coupons) ?>);
var redeemUrl = "<?= $redeemUrl?>";

</script>
<?php

// $this->registerJsFile('//res.wx.qq.com/open/js/jweixin-1.2.0.js', ['depends' => [\app\assets\HxkjAsset::className()]]);
$this->registerJsFile('@web/jselect/js/jsbarcode.js', ['depends' => [\app\assets\JselectAsset::className()]]);
$this->registerJsFile('@web/jselect/js/couponlist.js', ['depends' => [\app\assets\JselectAsset::className()]]);
?>

</html>
